{% extends "../layouts/_base.njk" %}
{% block title %}
  公告板 Button
{% endblock %}
{% block content %}
    <div class="app-main demo">
        <div class="row">
            <div class="col-6">
                <div class="app-card">
                    <div class="app-card-header">
                        <h4>基础用法</h4>
                    </div>
                    <div class="app-card-content demo-code">
<div class="code-source">
    <div class="row">
        <div class="col">
            <button type="button" class="btn btn-primary">Primary</button>
            <button type="button" class="btn btn-secondary">Secondary</button>
            <button type="button" class="btn btn-success">Success</button>
            <button type="button" class="btn btn-danger">Danger</button>
            <button type="button" class="btn btn-warning">Warning</button>
            <button type="button" class="btn btn-info">Info</button>
            <button type="button" class="btn btn-light">Light</button>
            <button type="button" class="btn btn-dark">Dark</button>
            <button type="button" class="btn btn-link">Link</button>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <button type="button" class="btn btn-primary btn-round">Primary</button>
            <button type="button" class="btn btn-secondary btn-round">Secondary</button>
            <button type="button" class="btn btn-success btn-round">Success</button>
            <button type="button" class="btn btn-danger btn-round">Danger</button>
            <button type="button" class="btn btn-warning btn-round">Warning</button>
            <button type="button" class="btn btn-info btn-round">Info</button>
            <button type="button" class="btn btn-light btn-round">Light</button>
            <button type="button" class="btn btn-dark btn-round">Dark</button>
            <button type="button" class="btn btn-link btn-round">Link</button>
        </div>
    </div>
</div>
                        <!--/code-source-->

                    </div>
                    <!--/demo-code-->
                </div>
            </div>
            <div class="col-6">
                <div class="app-card">
                    <div class="app-card-header">
                        <h4>禁用按钮</h4>
                    </div>
                    <div class="app-card-content demo-code">
<div class="code-source">
    <div class="row">
        <div class="col">
            <button type="button" class="btn btn-primary" disabled>Primary</button>
            <button type="button" class="btn btn-secondary" disabled>Secondary</button>
            <button type="button" class="btn btn-success" disabled>Success</button>
            <button type="button" class="btn btn-danger" disabled>Danger</button>
            <button type="button" class="btn btn-warning" disabled>Warning</button>
            <button type="button" class="btn btn-info" disabled>Info</button>
            <button type="button" class="btn btn-light" disabled>Light</button>
            <button type="button" class="btn btn-dark" disabled>Dark</button>
            <button type="button" class="btn btn-link" disabled>Link</button>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <button type="button" class="btn btn-primary btn-round" disabled>Primary</button>
            <button type="button" class="btn btn-secondary btn-round" disabled>Secondary</button>
            <button type="button" class="btn btn-success btn-round" disabled>Success</button>
            <button type="button" class="btn btn-danger btn-round" disabled>Danger</button>
            <button type="button" class="btn btn-warning btn-round" disabled>Warning</button>
            <button type="button" class="btn btn-info btn-round" disabled>Info</button>
            <button type="button" class="btn btn-light btn-round" disabled>Light</button>
            <button type="button" class="btn btn-dark btn-round" disabled>Dark</button>
            <button type="button" class="btn btn-link btn-round" disabled>Link</button>
        </div>
    </div>
</div>
                        <!--/code-source-->
                    </div>
                    <!--/demo-code-->
                </div>
            </div>
        </div>
        <!--/row-->


        <div class="row">
            <div class="col-6">
                <div class="app-card">
                    <div class="app-card-header">
                        <h4>其它按钮</h4>
                    </div>
                    <div class="app-card-content demo-code">
<div class="code-source">
    <div class="row">
        <div class="col">
            <button class="btn btn-w-xs btn-default">极小宽</button>
            <button class="btn btn-w-sm btn-primary">小的</button>
            <button class="btn btn-w-md btn-default">中等宽度</button>
            <button class="btn btn-w-lg btn-success">宽按钮</button>
            <button class="btn btn-w-xl btn-default">超宽</button>
        </div>
    </div>
</div>
                        <!--/code-source-->

                    </div>
                    <!--/demo-code-->
                </div>
            </div>
            <div class="col-6">
                <div class="app-card">
                    <div class="app-card-header">
                        <h4>图标按钮</h4>
                    </div>
                    <div class="app-card-content demo-code">
<div class="code-source">
    <div class="row">
        <div class="col">
            <button class="btn btn-label btn-primary">
                <i class="fa fa-edit"></i>
            </button>
            <button class="btn btn-label btn-primary">
                <i class="fa fa-share-alt"></i>
            </button>
            <button class="btn btn-label btn-primary">
                <i class="fa fa-thumbs-o-up"></i>
            </button>
            <button class="btn btn-label btn-primary">
                <i class="fa fa-check-square-o"></i>
                <span>确认提交</span>
            </button>
        </div>
    </div>
</div>
                        <!--/code-source-->
                    </div>
                    <!--/demo-code-->
                </div>
            </div>
        </div>
        <!--/row-->

        <div class="row">
            <div class="col-6">
                <div class="app-card">
                    <div class="app-card-header">
                        <h4>按钮组</h4>
                    </div>
                    <div class="app-card-content demo-code">
<div class="code-source">
    <div class="row">
        <div class="col-4">
            <div class="btn-group btn-group-toggle" data-toggle="buttons">
                <label class="btn btn-light active">
                    <input type="radio" name="options" id="option1" checked>
                    <i class="fa fa-underline"></i>
                </label>
                <label class="btn btn-light">
                    <input type="radio" name="options" id="option2">
                    <i class="fa fa-italic"></i>
                </label>
                <label class="btn btn-light">
                    <input type="radio" name="options" id="option3">
                    <i class="fa fa-strikethrough"></i>
                </label>
            </div>
        </div>
        <div class="col-4">
            <div class="btn-group btn-group-toggle" data-toggle="buttons">
                <label class="btn btn-secondary active">
                    <input type="radio" name="options" id="option1" checked>
                    <i class="fa fa-align-center"></i>
                </label>
                <label class="btn btn-secondary">
                    <input type="radio" name="options" id="option2">
                    <i class="fa fa-align-justify"></i>
                </label>
                <label class="btn btn-secondary">
                    <input type="radio" name="options" id="option3">
                    <i class="fa fa-align-left"></i>
                </label>
                <label class="btn btn-secondary">
                    <input type="radio" name="options" id="option3">
                    <i class="fa fa-align-right"></i>
                </label>
            </div>
        </div>
        <div class="col-4">
            <div class="btn-group btn-group-toggle" data-toggle="buttons">
                <label class="btn btn-primary active">
                    <input type="radio" name="options" id="option1" checked> 左
                </label>
                <label class="btn btn-primary">
                    <input type="radio" name="options" id="option2"> 中
                </label>
                <label class="btn btn-primary">
                    <input type="radio" name="options" id="option3"> 右
                </label>
            </div>
        </div>
    </div>
</div>
                    </div>
                </div>
            </div>
            <div class="col-6">
                <div class="app-card">
                    <div class="app-card-header">
                        <h4>下拉菜单按钮</h4>
                    </div>
                    <div class="app-card-content demo-code">
<div class="code-source">
    <div class="row">
        <div class="col-4">
            <div class="dropdown">
                <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    国学经典
                </button>
                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton" style="">
                    <a class="dropdown-item" href="#">中国古籍全录</a>
                    <a class="dropdown-item" href="#">国学网中国</a>
                    <a class="dropdown-item" href="#">国学经典书库</a>
                    <a class="dropdown-item" href="#">国学论坛</a>
                    <a class="dropdown-item" href="#">诗歌网</a>
                </div>
            </div>
        </div>
        <div class="col-4">
            <div class="dropdown dropup">
                <button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    荣国府
                </button>
                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton" style="">
                    <a class="dropdown-item" href="#">平儿</a>
                    <a class="dropdown-item" href="#">小红</a>
                    <a class="dropdown-item" href="#">丰儿</a>
                    <a class="dropdown-item" href="#">彩明</a>
                    <a class="dropdown-item" href="#">彩哥</a>
                    <a class="dropdown-item" href="#">来旺妇（凤姐陪房）</a>
                    <a class="dropdown-item" href="#">昭儿</a>
                    <a class="dropdown-item" href="#">旺儿</a>
                    <a class="dropdown-item" href="#">隆儿</a>
                    <a class="dropdown-item" href="#">庆儿</a>
                    <a class="dropdown-item" href="#">善姐</a>
                    <a class="dropdown-item" href="#">王信</a>
                    <a class="dropdown-item" href="#">林之孝</a>
                    <a class="dropdown-item" href="#">林之孝家的</a>
                    <a class="dropdown-item" href="#">赵嬷嬷（贾琏奶母)</a>
                </div>
            </div>
        </div>
        <div class="col-4">
            <div class="dropdown">
                <button class="btn btn-outline-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    贾家
                </button>
                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton" style="">
                    <a class="dropdown-item" href="#">宁国府</a>
                    <a class="dropdown-item" href="#">荣国府</a>
                    <a class="dropdown-item" href="#">王家</a>
                    <a class="dropdown-item" href="#">史家</a>
                    <a class="dropdown-item" href="#">薛家</a>
                </div>
            </div>
        </div>
    </div>
</div>
                    </div>
                </div>
            </div>
        </div>
        <!--/row-->

    </div>
    <!--/body-->
{% endblock %}
{% block js_footer %}
{% endblock %}